<template>
  <div class="goodsAdmin">
    <Head title="我的微店"/>
    <div class="container">
      <!-- 顶部导航 -->
      <div class="order_nav">
        <div
          :class="inds==0?'order_nav_list order_nav_list_act':'order_nav_list'"
          @click="setNav(0)"
        >
          <div class="order_nav_list_box">
            <div class="order_nav_list_box_top">{{count_info.store_for_sale_goods_num}}</div>
            <div class="order_nav_list_box_bot">出售中的商品</div>
          </div>
        </div>
        <div
          class="order_nav_list"
          :class="inds==1?'order_nav_list order_nav_list_act':'order_nav_list'"
          @click="setNav(1)"
        >
          <div class="order_nav_list_box">
            <div class="order_nav_list_box_top">{{count_info.store_off_shelf_goods_num}}</div>
            <div class="order_nav_list_box_bot">已下架的商品</div>
          </div>
        </div>
      </div>
      <!-- 顶部导航 end -->
      <!-- 二级导航 -->
      <div class="nav_">
        <div
          :class="ind==index?'nav_list nav_list_act':'nav_list'"
          v-for="(item,index) in navList"
          @click="setTwo(item.state,index)"
        >
          <div class="nav_list_box">
            {{item.name}}&nbsp;
            <img
              v-if="item.state==0&&ind==index"
              src="../../../static/image/mosthigh.png"
              alt
            >
            <img v-else-if="ind==index" src="../../../static/image/mostlow.png" alt>
          </div>
        </div>
      </div>
      <!-- 二级导航 end-->
      <div class="goodsAdmin_list" @click="hideEdit">
        <!-- 批量操作 -->
        <div class="allSelect">
          <div class="allSelect_left" @click="select_all">
            <img v-if="isAll" src="../../../static/image/someSelect_sure.png" alt>
            <img v-else src="../../../static/image/someSelect_defaul.png" alt>&nbsp;全选
          </div>
          <div class="allSelect_center">
            <!-- 占位 -->
          </div>
          <div class="allSelect_right" @click="setAllEdit">批量操作</div>
        </div>
        <!-- 批量操作end -->
        <div class="dataList_box">
          <van-list @load="onLoad">
            <div class="list" v-for="(item,index) in goodsList">
              <!-- s -->
              <div class="list_top" @click="SelectList(index)">
                <div class="list_top_left">
                  <img v-if="!item.state" src="../../../static/image/someSelect_defaul.png" alt>
                  <img v-else src="../../../static/image/someSelect_sure.png" alt>
                </div>
                <div class="list_top_goods_img">
                  <div class="zan">
                    <img
                      v-if="item.goods_recommend==1"
                      src="../../../static/image/shopEdit_setGreat.png"
                      alt
                    >
                  </div>
                  <img class="goods_img" :src="item.goods_thumb" alt>
                </div>
                <div class="list_top_right">
                  <div class="list_top_right_box">
                    <div class="list_top_right_box_name">
                      <span>{{item.goods_name}}-{{item.goods_id}}</span>
                    </div>
                    <div class="list_top_right_box_moeny">¥{{item.goods_market_price}}</div>
                    <div class="list_top_right_box_message">
                      <div class="list_top_right_box_message_list">收藏:{{item.goods_collection}}</div>
                      <div class="list_top_right_box_message_list">销量:{{item.goods_sales_volume}}</div>
                      <div class="list_top_right_box_message_list">库存:{{item.goods_explain}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- e -->
              <div class="list_bot" @click.stop v-if="inds==0">
                <!-- 操作 -->
                <div class="edit" v-if="item.edit">
                  <div
                    class="edit_list"
                    v-if="item.goods_recommend==2"
                    @click="edit_goods_state(index,item.goods_id,1)"
                  >首页推荐</div>
                  <div
                    class="edit_list"
                    v-else
                    @click="edit_goods_state(index,item.goods_id,2)"
                  >取消推荐</div>
                  <div class="edit_list" @click="delGoods(index,item.goods_id)">删除</div>
                </div>
                <!-- 操作 end -->
                <div class="list_bot_list">预览</div>
                <div class="list_bot_list" @click="toGoods_detail(item.goods_id)">编辑</div>
                <div class="list_bot_list" @click="xjia(index,item.goods_id)">下架</div>
                <div class="list_bot_list">分享</div>
                <div class="list_bot_list" @click="edit(index)">
                  <i class="iconfont icongengduo"></i>
                </div>
              </div>

              <div class="list_bot" @click.stop v-else>
                <div class="list_bot_list" @click="toGoods_detail(item.goods_id)">编辑</div>
                <div class="list_bot_list" @click="sjia(index,item.goods_id)">上架</div>
                <div class="list_bot_list" @click="delGoods(index,item.goods_id)">删除</div>
              </div>
            </div>
          </van-list>
        </div>
        <van-actionsheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消"/>
      </div>
      <!-- 新增商品 -->
      <div class="add_goods" v-if="inds==0" @click="toAddgoods">
        <img src="../../../static/image/shopEdit_addGoods.png" alt>
      </div>
      <!-- 新增商品end -->
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import goodsAdminList from "./goodsAdmin_list";
export default {
  data() {
    return {
      inds: 0, //顶部导航索引
      ind: 0,
      isAll: false,
      navList: [
        {
          name: "新品",
          state: 0
        },
        {
          name: "销量",
          state: 0
        },
        {
          name: "人气",
          state: 0
        },
        {
          name: "价格",
          state: 0
        }
      ],
      page: 1,
      goodsList: [],
      show: false,
      actions: [
        {
          name: "首页推荐"
        },
        {
          name: "取消推荐"
        },
        {
          name: "下架"
        },
        {
          name: "删除"
        }
      ],
      indss: 0,
      numm: 0,
      offon: true,
      selectGoodsList: [],
      count_info:{}
    };
  },
  mounted() {
    this.getGoodsdata();
    this.get_store_statistical_data();
  },
  methods: {
    // 获取商品统计
    get_store_statistical_data() {
      this.appJS.ajax(
        "user.get_store_statistical_data",
        "post",
        {
          store_id: this.appJS.getStorage("store_info").store_id
        },
        res => {
          if (res.recode == 1) {
            this.count_info = res.data.info
          }
        }
      );
    },
    // 编辑商品信息
    toGoods_detail(goods_id) {
      this.$router.push({ path: "/addGoods", query: { goods_id: goods_id } });
    },
    // 下啦加载更多
    onLoad() {
      if (this.numm == 0) {
        this.numm += 1;
      } else {
        if (this.offon) {
          this.offon = false;
          this.page += 1;
          this.getGoodsdata();
        }
      }
    },
    // 获取商品列表
    getGoodsdata() {
      let data = {};
      switch (this.ind) {
        case 0:
          data = { goods_addtime: this.navList[0].state == 0 ? 1 : 2 };
          break;
        case 2:
          data = { goods_views: this.navList[2].state == 0 ? 1 : 2 };
          break;
        case 1:
          data = { goods_sales_volume: this.navList[1].state == 0 ? 1 : 2 };
          break;
        case 3:
          data = { goods_price: this.navList[3].state == 0 ? 1 : 2 };
          break;
      }
      this.appJS.ajax(
        "user.get_goods_list",
        "post",
        {
          goods_for_sale: this.inds == 0 ? 1 : 2,
          page: this.page,
          page_limit: 15,
          ...data
        },
        res => {
          if (res.recode == 1) {
            if (this.page == 1) {
              for (let i in res.data.goods_list) {
                res.data.goods_list[i].state = false;
                res.data.goods_list[i].edit = false;
              }
              this.goodsList = res.data.goods_list;
            } else {
              if (res.data.goods_list.length == 0) {
                this.$toast("没有更多数据...");
              } else {
                for (let i in res.data.goods_list) {
                  res.data.goods_list[i].state = false;
                  res.data.goods_list[i].edit = false;
                }
                this.goodsList = this.goodsList.concat(res.data.goods_list);
                this.offon = true;
              }
            }
          }
        },this
      );
    },
    //取消或推荐商品
    edit_goods_state(index, goods_id, goods_recommend) {
      this.edit_goods_stateRUN(
        {
          goods_id: goods_id,
          goods_recommend: goods_recommend
        },
        () => {
          console.log(index);
          console.log(goods_recommend);
          this.hideEdit();
          this.goodsList[index].goods_recommend = goods_recommend;
        }
      );
    },
    // 下架
    xjia(index, goods_id) {
      this.edit_goods_stateRUN(
        {
          goods_id: goods_id,
          goods_for_sale: 2
        },
        () => {
          this.goodsList.splice(index, 1);
          this.get_store_statistical_data()
        }
      );
    },
    // 上架
    sjia(index, goods_id) {
      this.edit_goods_stateRUN(
        {
          goods_id: goods_id,
          goods_for_sale: 1
        },
        () => {
          this.goodsList.splice(index, 1);
          this.get_store_statistical_data()
        }
      );
    },
    // 删除单个商品
    delGoods(index, goods_id) {
      this.goods_delete_post(
        {
          goods_id: goods_id
        },
        () => {
          this.$toast("删除成功");
          this.goodsList.splice(index, 1);
          this.get_store_statistical_data()
        }
      );
    },
    goods_delete_post(data, cb) {
      this.appJS.ajax("user.goods_delete_post", "post", data, res => {
        if (res.data.recode == 1) {
          cb();
        }
      });
    },

    // 推荐上下架
    edit_goods_stateRUN(data, cb) {
      this.appJS.ajax("user.edit_goods_state", "post", data, res => {
        if (res.recode == 1) {
          cb();
        }
      });
    },
    // 选择顶部导航
    setNav(index) {
      this.inds = index;
      this.ind = 0;
      this.isAll = false;
      this.page = 1;
      this.offon = true;
      this.getGoodsdata();
    },
    // 设置编辑
    setEdit(index, b) {
      this.goodsList[index].edit = b;
    },
    // 全选
    SelectList(index) {
      this.goodsList[index].state = !this.goodsList[index].state;
      for (var i in this.goodsList) {
        if (!this.goodsList[i].state) {
          this.isAll = false;
          break;
        }
        if (parseInt(i) == this.goodsList.length - 1) {
          this.isAll = true;
        }
      }
    },
    // 隐藏设置
    hideEdit() {
      this.goodsList[this.indss].edit = false;
    },
    // 设置操作
    edit(index) {
      if (index != this.indss) {
        this.goodsList[this.indss].edit = false; //默认把上一个打开的关闭
        this.indss = index;
      }
      this.goodsList[index].edit = !this.goodsList[index].edit;
    },

    // 批量操作
    setAllEdit() {
      let li = [];
      for (let i in this.goodsList) {
        if (this.goodsList[i].state) {
          li.push(this.goodsList[i].goods_id);
        }
      }
      this.selectGoodsList = li;
      if (li.length > 0) {
        this.show = true;
      } else {
        this.$toast("请选择商品");
      }
    },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      if (item.name == "首页推荐") {
        this.edit_goods_stateRUN(
          {
            goods_id: this.selectGoodsList.join(","),
            goods_recommend: 1
          },
          () => {
            for (let i in this.selectGoodsList) {
              for (let j in this.goodsList) {
                if (this.goodsList[j].goods_id == this.selectGoodsList[i]) {
                  this.goodsList[j].goods_recommend = 1;
                  this.goodsList[j].state = false;
                  this.isAll = false;
                }
              }
            }
          }
        );
      } else if (item.name == "取消推荐") {
        this.edit_goods_stateRUN(
          {
            goods_id: this.selectGoodsList.join(","),
            goods_recommend: 2
          },
          () => {
            for (let i in this.selectGoodsList) {
              for (let j in this.goodsList) {
                if (this.goodsList[j].goods_id == this.selectGoodsList[i]) {
                  this.goodsList[j].goods_recommend = 2;
                  this.goodsList[j].state = false;
                  this.isAll = false;
                }
              }
            }
          }
        );
      } else if (item.name == "上架") {
        this.edit_goods_stateRUN(
          {
            goods_id: this.selectGoodsList.join(","),
            goods_for_sale: 1
          },
          () => {
            for (let i in this.selectGoodsList) {
              for (let j in this.goodsList) {
                if (this.goodsList[j].goods_id == this.selectGoodsList[i]) {
                  this.goodsList.splice(j, 1);
                  this.goodsList[j].state = false;
                  this.isAll = false;
                }
              }
            }
          }
        );
      } else if (item.name == "下架") {
        this.edit_goods_stateRUN(
          {
            goods_id: this.selectGoodsList.join(","),
            goods_for_sale: 2
          },
          () => {
            for (let i in this.selectGoodsList) {
              for (let j in this.goodsList) {
                if (this.goodsList[j].goods_id == this.selectGoodsList[i]) {
                  this.goodsList.splice(j, 1);
                  this.goodsList[j].state = false;
                  this.isAll = false;
                }
              }
            }
          }
        );
      } else if (item.name == "删除") {
        this.goods_delete_post(
          {
            goods_id: this.selectGoodsList.join(","),
            data: "1"
          },
          () => {
            this.$toast("删除成功");
            for (let i in this.selectGoodsList) {
              for (let j in this.goodsList) {
                if (this.goodsList[j].goods_id == this.selectGoodsList[i]) {
                  this.goodsList.splice(j, 1);
                  this.goodsList[j].state = false;
                  this.isAll = false;
                }
              }
            }
          }
        );
      }
    },

    // 全选
    select_all() {
      if (this.isAll) {
        this.isAll = false;
        for (var i in this.goodsList) {
          this.goodsList[i].state = false;
        }
      } else {
        this.isAll = true;
        for (var i in this.goodsList) {
          this.goodsList[i].state = true;
        }
      }
    },
    // 设置二级导航
    setTwo(state, index) {
      this.page = 1;
      this.offon = true;
      this.isAll = false;
      if (this.ind == index) {
        if (state == 0) {
          this.navList[index].state = 1;
        } else {
          this.navList[index].state = 0;
        }
      } else {
        this.navList[index].state = 0;
        this.ind = index;
      }
      this.getGoodsdata();
    },
    // 新增商品
    toAddgoods() {
      this.$router.push({ path: "/addGoods", query: { goods_id: 0 } });
    }
  },
  watch: {
    inds(data) {
      if (data == 0) {
        this.actions = [
          {
            name: "首页推荐"
          },
          {
            name: "取消推荐"
          },
          {
            name: "下架"
          },
          {
            name: "删除"
          }
        ];
      } else {
        this.actions = [
          {
            name: "上架"
          },
          {
            name: "删除"
          }
        ];
      }
      console.log(data);
    }
  },
  components: {
    Head,
    goodsAdminList
  }
};
</script>

<style scoped lang='less'>
@co: rgb(236, 79, 70);
.goodsAdmin {
  .order_nav {
    height: 20vw;
    width: 100%;
    background: @color;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .order_nav_list {
      color: #fff;
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .order_nav_list_box {
        width: 80%;
        .order_nav_list_box_top {
          font-size: 0.9rem;
          text-align: center;
        }
        .order_nav_list_box_bot {
          font-size: 0.9rem;
          text-align: center;
          margin-top: 0.2rem;
        }
      }
    }
    .order_nav_list_act {
      color: @co;
    }
  }
  .nav_ {
    height: 3.5rem;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #efefef;
    .nav_list {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 0.7rem;
      color: #888;
      .nav_list_box {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: 1rem;
          width: 1rem;
        }
      }
    }
    .nav_list_act {
      color: @co;
    }
  }
  .add_goods {
    position: fixed;
    height: 4rem;
    width: 4rem;
    bottom: 1rem;
    right: 0.5rem;
  }
}
.goodsAdmin_list {
  padding: 0.5rem 0;
  height: calc(100vh - 3.5rem - 60px - 20vw);

  .list {
    background: #fff;
    margin-bottom: 0.5rem;
    &:last-child {
      margin-bottom: 0;
    }
    .list_top {
      height: 25vw;
      width: 100%;
      padding: 0 1rem;
      padding-right: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #efefef;
      transition: 0.4s;
      &:active {
        background: #efefef;
      }
      .list_top_left {
        height: 100%;
        width: 12%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          height: 1.5rem;
          width: 1.5rem;
        }
      }
      .list_top_goods_img {
        height: 100%;
        width: 25%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .goods_img {
          height: 20vw;
          width: 20vw;
          border-radius: 6px;
          box-shadow: 1px 1px 5px #efefef;
        }
        .zan {
          position: absolute;
          left: 0;
          top: 2.2vw;
          width: 1.5rem;
          height: 1.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .list_top_right {
        width: 63%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .list_top_right_box {
          width: 100%;
          height: 20vw;
          .list_top_right_box_name {
            font-size: 0.7rem;
            height: 50%;
            span {
              .text(2);
            }
          }
          .list_top_right_box_moeny {
            font-size: 0.6rem;
            color: @actColor;
          }
          .list_top_right_box_message {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #888;

            .list_top_right_box_message_list {
              flex: 1;
              font-size: 0.6rem;
            }
          }
        }
      }
    }
    .list_bot {
      height: 2.5rem;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.7rem;
      color: #888;
      position: relative;
      .edit {
        position: absolute;
        right: 0.5rem;
        top: 2rem;
        width: 5rem;
        height: 5rem;
        background: @color;
        color: #fff;
        font-size: 0.7rem;
        border-radius: 4px;
        z-index: 99;
        .edit_list {
          height: 50%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          &:active {
            background: #1d1d1d;
          }
        }
      }
      .list_bot_list {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        &:active {
          background: #efefef;
        }
        .icongengduo {
          font-size: 1.1rem;
        }
      }
    }
  }
}
.dataList_box {
  height: calc(100% - 3rem);
  padding-top: 0.5rem;
  overflow-y: auto;
}
.allSelect {
  height: 3rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1rem;
  background: #fff;

  .allSelect_left {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8rem;
    img {
      height: 1rem;
      width: 1rem;
    }
  }
  .allSelect_center {
    width: 40%;
    height: 100%;
  }
  .allSelect_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8rem;
    height: 100%;
    width: 30%;
  }
}
</style>
